<template>
	
	<view class="wmpopup">
		
		
		<view class="wmpopup-box">
			
			<view class="xflex-x-between">
				<view class="wmpopup-title">
					请选择入住地点
				</view>
				<image @click="close()" class="wmpopup-gb" src="/static/image/index/popup-gb.png" mode=""></image>
			</view>
	
	
			<view class="wmpopup-address xflex-x-between xbb8D xpb24">
				<view class="xflex-x">
					<image class="wmpopup-address-icon xmr10" src="/static/image/index/dingwei.png" mode=""></image>
					<view class="">
						<view class="xflex-x">
							<view class="wmpopup-address-dw xflex-x-center">
								当前定位
							</view>
							<view class="wmpopup-address-detail xmt10 clamp" style="width: 440rpx;">
								{{counter.enterInfo.addressname || ''}}
							</view>
						</view>
						<view class="wmpopup-address-ads">
							
							{{counter.enterInfo.address || ''}}
							
							
							
						</view>
					</view>
				</view>
				<view class="wmpopup-address-anew" @click="getadd()">
					重新定位
				</view>
			</view>
	
	
			<!-- <view class="wmpopup-search xmt32 xflex-x">
				<image class="wmpopup-search-icon" src="/static/image/index/search.png" mode=""></image>
				<input type="text" class="wmpopup-search-ipt xflex1" placeholder="关键字/地名/区域 / 商圈" v-model="addressinfos" />
				<view class="wmpopup-btn" @click="save()">
					确定
				</view>
			</view> -->
	
			<!-- <view class="">
				<u-tabs :list="country" @click="click"></u-tabs>
			</view> -->
			
			
			<view class="wmpopup-content">
				
				<scroll-view scroll-y="true" style="height: 100%;">
					<u-index-list :index-list="indexList" customNavHeight="150">
					<!-- <view class="wmpopup-popular">
						<view class="wmpopup-popular-title">
							热门城市
						</view>
					
						<view class="wmpopup-popular-box">
							
							<view class="wmpopup-popular-item" v-for="(item,index) in props.hot" :class="item.name == addressinfos?'blue':''" @click="selectCity(item.name)" :key="index">
								{{item.name}}
							</view>
							
						</view>
					</view> -->
					<template v-for="(item, idx) in itemArr" :key="index">
						<u-index-item>
							<u-index-anchor :text="indexList[idx]" color='#B1B1B1' bgColor='#fff'></u-index-anchor>
							<view class="">
								<view class="" v-if="item.length>0">
									<view class="wmpopup-list" v-for="(itema, indexs) in item" :key="indexs"
										@click="selectCity(itema)">
										{{itema}}
									</view>
								</view>
								<view class="list-cell" v-else style="font-size: 24upx;color: #999;">暂无~</view>
							</view>
						</u-index-item>
					</template>
					</u-index-list>
				</scroll-view>
				
					
				
			</view>
	
		
		</view>
		
	</view>
	
</template>

<script setup>
	import {ref} from "vue"
	import itemArr from "@/utils/city.js"
	
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	
	import {
		useCounterStore
	} from '@/Store/index'
	const counter = useCounterStore()
	
	
	const props = defineProps({
		city:{
			type:Array,
			default:()=>[]
		},
		hot:{
			type:Array,
			default:()=>[]
		},
	})
	let country = ref([{
		name: '中国大陆',
	},
	// {
	// 	name: '港澳台及海外',
	// }
	])
	let indexList = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",
		"U", "V", "W", "X", "Y", "Z"
	]
	
	let rmadd = ['上海',"成都",'北京','上海',"成都",'北京','上海',"成都",'北京']
	
	let addressinfos = ref('')
	
	onLoad(()=>{
		addressinfos.value = counter.enterInfo.keyword
	})
	
	
	const emit= defineEmits(['close'])
	
	// 关闭弹窗
	const close = () =>{
		emit('close')
	}
	
	const save = () =>{
		counter.enterInfo.keyword = addressinfos.value
		emit('close')
	}
	
	// 存储省份
	const selectCity = (item) =>{
		// counter.enterInfo.keyword = item
		addressinfos.value = item
	}
	
	// 
	const getadd = () =>{
		uni.chooseLocation({
			success(res) {
				console.log(res);
				counter.enterInfo.lat = res.latitude
				counter.enterInfo.lng = res.longitude
				counter.enterInfo.address = res.address
				counter.enterInfo.addressname  = res.name
				counter.enterInfo.keyword = res.name
				emit('close')
			}
		})
	}
	
</script>

<style lang="scss">
	.wmpopup {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		z-index: 3;
		background-color: #00000070;
	
	
		&-box {
			position: absolute;
			padding: 30rpx 31rpx;
			box-sizing: border-box;
			width: 750rpx;
			height: 1300rpx;
			bottom: 0;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
		}
	
		&-gb {
			width: 40rpx;
			height: 40rpx;
		}
	
		&-title {
			font-weight: bold;
			font-size: 40rpx;
			color: #222222;
		}
	
		.blue {
			color: #0EBBFB;
		}
		&-address {
			&-anew {
				font-weight: 500;
				font-size: 24rpx;
				color: #0EBBFB;
			}
	
			&-icon {
				width: 28rpx;
				height: 28rpx;
			}
	
			&-dw {
				width: 112rpx;
				height: 26rpx;
				background: rgba(14, 187, 251, 0.1);
				border-radius: 13rpx;
				font-weight: 500;
				font-size: 20rpx;
				color: #0EBBFB;
				margin-top: 15rpx;
			}
	
			&-detail {
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
			}
	
			&-ads {
				font-weight: 500;
				font-size: 30rpx;
				color: #666666;
			}
		}
	
	
		&-search {
			width: 690rpx;
			height: 68rpx;
			background: #F5F5F5;
			border-radius: 34rpx;
	
			&-icon {
				width: 36rpx;
				height: 36rpx;
				margin-left: 28rpx;
				margin-right: 18rpx;
			}
	
			&-ipt {
				font-weight: 500;
				font-size: 26rpx;
			}
		}
	
		&-popular {
			
			&-title {
				margin-top: 68rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #666666;
			}
			
			&-box {
				margin-bottom: 43rpx;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
			}
			&-item {
				font-weight: 500;
				font-size: 26rpx;
				color: #222222;
				margin-top: 43rpx;
			}
		}
		
		&-list {
			font-weight: 500;
			font-size: 24rpx;
			color: #222222;
			margin-top: 60rpx;
		}
		
		&-btn {
			width: 120rpx;
			height: 68rpx;
			background: #0EBBFB;
			color: #fff;
			text-align: center;
			line-height: 68rpx;
			font-size: 24rpx;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
		}
	}
	
	
	
	
	
</style>